<template>
  <a-row>
    <a-col :span="24">
      <a-button type="primary">保存</a-button>
    </a-col>
    <a-col :span="8">
      <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
      <a-tree
        v-model="checkedKeys"
        checkable
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onSelect"
      />
    </a-col>
    <a-col :span="16">
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :rowKey="(record) => record.id"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
      </s-table>
    </a-col>
  </a-row>
</template>

<script>
import { STable } from '@/components'
import { treeList2 } from '@/api/menu'
import { getAntPermissions } from '@/api/permission'

const statusMap = {
  1: {
    types: '1',
    text: 'error'
  },
  2: {
    types: '2',
    text: 'success'
  }
}

const columns = [
      {
        title: '资源编码',
        dataIndex: 'action'
      },
      {
        title: '资源类型',
        dataIndex: 'types',
        scopedSlots: { customRender: 'types' }
      },
      {
        title: '资源名称',
        dataIndex: 'des'
      }
    ]
const treeData = [];

export default {
  components: {
    STable
  },
  data () {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData,
      permissionId: '',
      formInline: {
        action: '',
        types: '',
        des: ''
      },
      columns,
      selectedRowKeys: [],
      selectedRows: [],
      upmsUserRoleDepPageRequest: { roleId: '', menuId: '' },
      roleId: { roleId: '' },
      loadData: parameter => {
        return getAntPermissions(this.upmsUserRoleDepPageRequest).then(res => {
            console.log('getAntPermissions', res)
            if (res.myPermissionids !== undefined) {
              this.selectedRowKeys = res.myPermissionids
            }
            return res.result
          })
      }
    };
  },
  mounted () {
    this.fetchs({
        pageSize: 5,
        pageNum: 1
    });
  },
  watch: {
    checkedKeys (val) {
      console.log('onCheck', val);
    }
  },
  filters: {
    statusFilter (type) {
      const s = statusMap[type].text
      console.log('statusFilter' + s)
      return s
    },
    statusTypeFilter (type) {
      const s = statusMap[type].types
      console.log('statusTypeFilter' + s)
      return s
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      debugger
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onCheck (checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
      // 加载按钮数据
      debugger;
      var s = this.selectedKeys[0]
      // this.$refs.permissionTable.upmsUserRoleDepPageRequest = { menuId: s }
      // this.$refs.permissionTable.featch()
      const th = this
      this.upmsUserRoleDepPageRequest.menuId = s
      console.log('tree onselect' + this.upmsUserRoleDepPageRequest)
      th.$refs.table.refresh()
    },
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    initAuthoritys () {
      console.log('1');
    },
    fetchs () {
      if (!this.formEdit) {
        this.formStatus = 'update';
      }
      debugger
     this.$nextTick(() => {
      treeList2(this.roleId).then(res => {
        console.log('treeList2.call()', res)
        debugger
        this.treeData = res.results;
        this.checkedKeys = res.myMenus;
        // 把第一个菜单的权限id,给到按钮级菜单作为参数查询按钮级菜单列表
        this.upmsUserRoleDepPageRequest.menuId = res.results[0].key
        this.$refs.table.refresh()
      })
     })
    },
    onChange () {
      console.log('下拉模糊搜索')
    }
  }
};
</script>

<style>
</style>
